/*
 * 名称：放大镜
 * 参数：宽度(w)，高度(h)，比例(b)，图片路径（img）
 */

function Scale(w,h,b,img){
	/*先获取多有要用到的节点*/
	this.w=w;
	this.h=h;
	this.b=b;
	this.img=img;
	this.elem=$(".scale");
	this.small=this.elem.children(":eq(0)");//大div下面的第一个div（放小图）
	this.big=this.elem.children(":eq(1)");//dadiv下面的第二个div（放大图）
	this.smallImag=this.small.children("img");//小图div下面的背景图
	this.mask=this.small.children("div:eq(0)");//遮罩层
	this.glass=this.small.children("div:eq(1)");//镜子
	this.glassImg=this.glass.children("img");//镜子里面的图片
	this.bigImg=this.big.children("img");//大图下面的img
	
	this.init();
}

	Scale.prototype={
		init:function(e){
			//首先让图片都指向传进来的图片
			this.smallImag.attr({"src":this.img});//小div中的图片
			this.glassImg.attr({"src":this.img});//小镜子里面的图片
			this.bigImg.attr({"src":this.img});//大div中的img
			
			//给每个容器设置css属性
			this.small.css({"width":this.w,"height":this.h});//小div中的css属性
			this.big.css({"width":this.w,"height":this.h,"left":this.w+20});//大div中的css属性
			this.smallImag.css({"width":this.w,"height":this.h}); 
			this.mask.css({"width":this.w,"height":this.h});
			this.glassImg.css({"width":this.w,"height":this.h});
			
			this.glass.css({"width":this.w/this.b,"height":this.h/this.b});
			this.bigImg.css({"width":this.w*this.b,"height":this.h*this.b});
			
			this.small.bind("mousemove",this.move.bind(this));
			this.small.bind("mouseenter",this.over.bind(this));
			this.small.bind("mouseleave",this.out.bind(this));
			
		},
		
		move:function(e){
			//获取鼠标在大盒子中的位置
			this.x=e.clientX-this.elem.offset().left;
			this.y=e.clientY-this.elem.offset().top;
			
			//鼠标居中
			this.x=this.x-this.w/this.b/2;
			this.y=this.y-this.h/this.b/2;
			
			//边界处理
			if(this.x<0)this.x=0;
			if(this.y<0)this.y=0;
			
			if(this.x>this.w-this.w/this.b)	this.x=this.w-this.w/this.b;
			if(this.y>this.h-this.h/this.b)	this.y=this.h-this.h/this.b;
			
			
			
			this.glass.css({"left":this.x,"top":this.y});
			this.glassImg.css({"left":-this.x,"top":-this.y});
			this.bigImg.css({"left":-this.x*this.b,"top":-this.y*this.b});
			
		},
		over:function(e){
			this.glass.css({"display":"block"});
			this.big.fadeIn();
		},
		
		out:function(){
			this.glass.css({"display":"none"});
			this.big.fadeOut();
		}
	}


